import React, { useEffect, useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import { useSelector } from "react-redux";
import http from "../../api/http";
import styles from "./index.module.css";
function Index() {
  const [sj] = useSearchParams();
  const isdeep = sj.get("isdeep");
  console.log(isdeep);
  const navigate = useNavigate();
  const { start, end, date } = useSelector((state) => state.CitySlice);
  const [isSpeed, setIsSpeed] = useState(false);
  const [isSeat, setIsSeat] = useState(false);
  const [isDesc, setIsDesc] = useState(false);
  const [page, setPage] = useState(1);
  const [TickList, setTickList] = useState([]);
  const getTickList = async () => {
    const res = await http.post("/api/trip/train", {
      start,
      date,
      end,
      isSpeed,
      isSeat,
      isDesc,
      page,
    });
    const { data } = res.data;

    console.log(data);
    setTickList(data);
  };
  useEffect(() => {
    getTickList();
  }, []);
  const handleTodeitle=(id)=>{
    navigate(`/deitle/${id}`)
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>车票列表</NavBar>
      <div>
        <div className={styles.list_box}>
          {TickList?.map((item, index) => (
            <div onClick={()=>handleTodeitle(item.id)}>
              <div className={styles.list_left} key={index}>
                <span>{item.start}</span>
                <span>{item.end}</span>
                <span>{item.startTime}</span>
                <span>
                  VIP座 <b>有票</b>
                </span>
                <span>
                  一等座 <b>有票</b>
                </span>
                <span>
                  二等座 <b>有票</b>
                </span>
              </div>
              <div className={styles.list_right}>{item.tick.secondTick}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Index;
